<template>
	<view class="container" v-show="show">
		<view class="box" :class="{disabled:disabled}" @click="onMultipleForward">
			<i class="iconfont icon-fenxiang my-icon"></i>
		</view>
		<view class="box" :class="{disabled:disabled}" @click="onMultipleDelete">
			<i class="iconfont icon-shanchu1 my-icon"></i>
		</view>
		<i class="iconfont icon-winfo-icon-guanbi close-icon" @click="onClose"></i>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: () => false
			},
			disabled: {
				type: Boolean,
				default: () => false
			}
		},
		methods: {
			onClose() {
				this.$emit('update:show', false)
			},
			onMultipleDelete() {
				this.$emit('onMultipleDelete')
			},
			onMultipleForward() {
				this.$emit('onMultipleForward')
			}
		}

	}
</script>

<style lang="scss" scoped>
	.disabled {
		pointer-events: none;
		opacity: 0.6;
	}

	.container {
		position: relative;
		width: 100%;
		height: 132rpx;
		background: #ffffff;
		display: flex;
		justify-content: space-around;
		padding: 10rpx 0;
		box-sizing: border-box;

		.box {
			cursor: pointer;
			display: flex;
			align-items: center;
			text-align: center;

			.my-icon {
				font-size: 48rpx;
				color: #606665;
			}
		}

		.close-icon {
			cursor: pointer;
			position: absolute;
			right: 26rpx;
			top: 20rpx;
			color: #D9D9D9;
			font-size: 16rpx;
		}
	}
</style>
